<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import {
  Menu as IconMenu,
  Message,
  Setting,
  PictureFilled,
  Avatar,
  HelpFilled,
  ChromeFilled,
} from "@element-plus/icons-vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
/* 面包屑导航 */
const breadcrumb = reactive<Array<string>>([]);


/* 折叠菜单 */
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="common-layout">
    <el-container class="outer-box">
      <!-- 头部 -->

      <el-container class="content-box">
        <!-- 底部内容左边 -->
        <!-- 添加抽屉 -->

        <el-aside ref="scrollbarRef" always width="200px">
          <el-scrollbar>
            <!-- el-menu是菜单容器 -->
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
              <el-radio-button :label="false">expand</el-radio-button>
              <el-radio-button :label="true">collapse</el-radio-button>
            </el-radio-group>
            <el-menu
              :default-openeds="[]"
              :router="true"
              background-color="#001529"
              active-text-color="#ffd04b"
              text-color="#fff"
              height="100%"
              :collapse="isCollapse"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="1">
                <el-icon color="#61dafb"
                  ><ChromeFilled color="#61dafb"
                /></el-icon>
                HAIGOU_ADMIN
              </el-menu-item>
              <el-menu-item index="1">
                <el-icon><icon-menu /></el-icon>
                系统首页
              </el-menu-item>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><icon-menu /></el-icon>轮播图管理
                </template>

                <el-menu-item index="/admin/Banner"
                  ><el-icon><PictureFilled /></el-icon>轮播图列表</el-menu-item
                >
                <!-- <template #title>轮播图列表</template> -->
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon><icon-menu /></el-icon>产品管理
                </template>
                <el-menu-item index="/admin/proList"
                  ><el-icon><PictureFilled /></el-icon>产品列表</el-menu-item
                >
                <el-menu-item index="/admin/SecondsKill"
                  ><el-icon><PictureFilled /></el-icon>秒杀列表</el-menu-item
                >
                <el-menu-item index="/admin/RecommendList"
                  ><el-icon><PictureFilled /></el-icon>推荐列表</el-menu-item
                >
                <el-menu-item index="/admin/SearchList"
                  ><el-icon><PictureFilled /></el-icon>筛选列表</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>账户管理
                </template>
                <el-menu-item index="/admin/Banner"
                  ><el-icon><Avatar /></el-icon>用户列表</el-menu-item
                >
                <el-menu-item index="/admin/Banner"
                  ><el-icon><Avatar /></el-icon>管理员列表</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>数据可视化
                </template>
                <el-menu-item index="/admin/Banner"
                  ><el-icon><HelpFilled /></el-icon
                  >echarts使用示例</el-menu-item
                >
                <el-menu-item index="/admin/Banner"
                  ><el-icon><HelpFilled /></el-icon
                  >antv-g2使用示例</el-menu-item
                >
                <el-menu-item index="/admin/Banner"
                  ><el-icon><HelpFilled /></el-icon>antdcharts</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>编辑器
                </template>
                <el-menu-item index="/admin/Banner">富文本编辑器</el-menu-item>
                <el-menu-item index="/admin/Banner"
                  >markdown编辑器</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="7">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>导入以及导出
                </template>
                <el-menu-item index="/admin/Banner">导入excel</el-menu-item>
                <el-menu-item index="/admin/Banner">导出excel</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="8">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>使用地图
                </template>
                <el-menu-item index="/admin/Banner">百度地图</el-menu-item>
                <el-menu-item index="/admin/Banner">高德地图</el-menu-item>
                <el-menu-item index="/admin/Banner">腾讯地图</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="9">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>客服
                </template>
              </el-sub-menu>
              
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <!-- 底部内容右边 -->

        <el-main>
          <div class="right-header" style="height: 50px">
            <!-- 面包屑导航 -->
            <!-- <el-breadcrumb separator=">">
              <template v-for="(item, index) in breadcrumb">
                <el-breadcrumb-item
                  v-if="index < breadcrumb.length - 1"
                  :key="index"
                  :to="{
                    path: '/info/resource',
                    query: { path: setQueryPath(index) },
                  }"
                  >{{ item }}</el-breadcrumb-item
                >
                <el-breadcrumb-item v-else :key="index">{{
                  item
                }}</el-breadcrumb-item>
              </template>
              <el-breadcrumb-item
                v-if="breadcrumb.length === 1"
              ></el-breadcrumb-item>
            </el-breadcrumb> -->
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
  /* border:1px solid black; */
}

.outer-box {
  width: 100%;
  height: 100%;
}

.content-box {
  height: 100%;
}
.el-menu {
  height: 100%;
}
.el-aside {
  width: 200px;
  height: 100%;
  background: #001529;
}

.right-header {
  height: 80px;
  background-color: red;
}


/* 折叠菜单 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
